<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <i class="el-icon-search"></i>
                <el-input v-model="select_word" size="mini" placeholder="请输入歌手名" class="handle-input"></el-input>
                <el-button type="danger" size="mini" @click="delAll" style="float: right;">批量删除</el-button>
                <el-button type="primary" size="mini" @click="centerDialogVisible=true" style="float: right;">添加歌手</el-button>
            </div>
        </div>
        <el-table size="mini" border style="width: 100%" height="680px" :data="data" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40px"></el-table-column>
        <el-table-column label="歌手图片" width="110" align="center">
            <template slot-scope="scope">
                <div class="singer-img">
                    <img :src="getUrl(scope.row.pic)" style="width: 100%">
                </div>
                <el-upload :action="uploadUrl(scope.row.id)" 
                :before-upload="beforeAvatorUpload" 
                :on-success="handleAvatorSuccesss">
                <el-button size="mini">更新头像</el-button>
                </el-upload>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="歌手" width="120" align="center"></el-table-column>
        <el-table-column label="性别" width="50" align="center">
            <template slot-scope="scope">
                {{changeSex(scope.row.sex)}}
            </template>
        </el-table-column>
        <el-table-column  label="生日" width="120" align="center">
            <template slot-scope="scope">
                {{attachBirth(scope.row.birth)}}
            </template>
        </el-table-column>
        <el-table-column prop="location" label="地区" width="100" align="center"></el-table-column>
        <el-table-column label="简介">
            <template slot-scope="scope">
                <p style="height: 100px; overflow: scroll;">{{scope.row.introduction}}</p>
            </template>
        </el-table-column>
        <el-table-column lable="歌曲管理" width="110px" align="center">
            <template slot-scope="scope">
                <el-button size="mini" @click="songEdit(scope.row.id,scope.row.name)">歌曲管理</el-button>
            </template>
        </el-table-column>        
        <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button size="mini" @click="handleDelete(scope.row.id)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
        </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination 
            background
            layout = "total,prev,pager,next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="tableData.length"
            @current-change="handleCurrentChange">
            
            </el-pagination>
        </div>
<!-- 歌手姓名添加 -->
        <el-dialog title="添加歌手" :visible.sync="centerDialogVisible" width="400px" center>
            <el-form :model="registerForm" ref="registerForm" label-width="80px">
            <el-form-item prop="name" label="歌手名" size="mini">
                <el-input v-model="registerForm.name" placeholder="歌手名"></el-input>
            </el-form-item>
<!-- 性别框选择 -->
            <el-form-item label="性别" size="mini">
                <el-radio-group v-model="registerForm.sex">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">组合</el-radio>
                    <el-radio :label="3">不明</el-radio>
                </el-radio-group>
            </el-form-item>
<!-- 选择日期-->
            <el-form-item prop="birth" label="生日" size="mini">
                <el-date-picker type="date" placeholder="选择日期" v-model="registerForm.birth" style="width: 100%;"></el-date-picker>
            </el-form-item>
<!-- 地区 -->
            <el-form-item prop="location" label="地区" size="mini">
               <el-input v-model="registerForm.location" placeholder="地区"></el-input>
            </el-form-item>
<!-- 简介 -->
            <el-form-item prop="introduction" label="简介" size="mini">
               <el-input v-model="registerForm.introduction" placeholder="简介" type="textarea"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="addSinger" size="mini" type="success">提交</el-button>
                <el-button @click="centerDialogVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>

<!-- 修改歌手 -->
        <el-dialog title="修改歌手" :visible.sync="editVisible" width="400px" center>
            <el-form :model="form" ref="form" label-width="80px">
            <el-form-item prop="name" label="歌手名" size="mini">
                <el-input v-model="form.name" placeholder="歌手名"></el-input>
            </el-form-item>
<!-- 性别框选择 -->
            <el-form-item label="性别" size="mini">
                <el-radio-group v-model="form.sex">
                    <el-radio :label="0">女</el-radio>
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">组合</el-radio>
                    <el-radio :label="3">不明</el-radio>
                </el-radio-group>
            </el-form-item>
<!-- 选择日期-->
            <el-form-item label="生日" size="mini">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%;"></el-date-picker>
            </el-form-item>
<!-- 地区 -->
            <el-form-item prop="location" label="地区" size="mini">
               <el-input v-model="form.location" placeholder="地区"></el-input>
            </el-form-item>
<!-- 简介 -->
            <el-form-item prop="introduction" label="简介" size="mini">
               <el-input v-model="form.introduction" placeholder="简介" type="textarea"></el-input>
            </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="editSave" size="mini" type="success">提交</el-button>
                <el-button @click="editVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>

        <!-- 删除歌手 -->
        <el-dialog title="删除歌手" :visible.sync="delVisible" width="250px" center>
            <div align="center">删除不可恢复,确定删除?</div>
            <span slot="footer">
                <el-button @click="deleteRow" size="mini" type="success">确定</el-button>
                <el-button @click="delVisible = false" size="mini" type="warning">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {setSinger,getAllSinger,updateSinger,delSinger} from '../api/index'
import {mixin} from '../mixins/index'
export default{
    mixins: [mixin],
    data(){
        return{
            centerDialogVisible: false, // 添加弹框是否显示
            editVisible: false,         //编辑弹框是否提示
            delVisible: false,      //删除弹窗是否显示
            registerForm:{
                // 添加框
                name: '',
                sex:'',
                birth:'',
                location:'',
                introduction: ''
            },
            form:{
                // 修改框
                id: '',
                name: '',
                sex:'',
                birth:'',
                location:'',
                introduction: ''
            },
            tableData: [],
            tempData: [],
            select_word:'',
            pageSize: 5, //分页每页大小
            currentPage: 1, //当前页
            idx: -1,
            multipleSelection: [] //那些项已经打勾
        }
    },
    computed:{
        // 计算当前搜索结果表里的数据
        data(){
            return this.tableData.slice((this.currentPage - 1 ) * this.pageSize,this.currentPage * this.pageSize)
        }
    },
    // 使用watch对搜索框进行监控
    watch:{
        // 搜索框里面内容发生变化时，搜索结果table列表的内容会跟着它发生变化
        select_word:function(){
            if(this.select_word == ''){
                // this.getData();
                this.tableData = this.tempData;
            }else{
                this.tableData = [];
                for(let item of this.tempData){
                    if(item.name.includes(this.select_word)){
                        this.tableData.push(item);
                    }
                }
            }
        }
    },
    created(){
        this.getData();
    },
    methods:{
        // 需要传入当前页的参数
        handleCurrentChange(val){
            this.currentPage = val;
        },

        getData(){
            this.tableData = [];
            this.tempData = [];
            getAllSinger().then(res =>{
                this.tempData = res;
                this.tableData = res;
                this.currentPage =1 ;
            })
        },
        // 添加歌手
        addSinger(){
            let d = this.registerForm.birth;
            let datetime= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
            let params= new URLSearchParams();
            params.append('name',this.registerForm.name);
            params.append('sex',this.registerForm.sex);
            params.append('pic','img/singerPic/hhh.jpg');
            params.append('birth',datetime);
            params.append('location',this.registerForm.location);
            params.append('introduction',this.registerForm.introduction);

            setSinger(params)
            .then(res =>{
                if(res.code == 1){
                    this.getData();
                    this.notify("添加成功","success")
                }else{
                    this.notify("添加失败","error")
                }
            })
            .catch(err =>{
                console.log(err);
            });
            this.centerDialogVisible = false;
        },
        // 弹出编辑页面
        handleEdit(row){
            this.editVisible = true;
            this.form= {
                id: row.id,
                name: row.name,
                sex: row.sex,
                birth: row.birth,
                location: row.location,
                introduction: row.introduction
            }
        },
        // 保存编辑页面数据
        editSave(){
            let d = new Date(this.form.birth);
            let datetime= d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
            let params= new URLSearchParams();
            params.append('id',this.form.id);
            params.append('name',this.form.name);
            params.append('sex',this.form.sex);
            params.append('birth',datetime);
            params.append('location',this.form.location);
            params.append('introduction',this.form.introduction);

            updateSinger(params)
            .then(res =>{
                if(res.code == 1){
                    this.getData();
                    this.handleCurrentChange(1);
                    this.notify("修改成功","success")
                }else{
                    this.notify("修改失败","error")
                }
            })
            .catch(err =>{
                console.log(err);
            });
            this.editVisible = false;
        },
        // 更新图片
        uploadUrl(id){
            return `${this.$store.state.HOST}/singer/updateSingerPic?id=${id}`
        },
        // 删除一个歌手
        deleteRow(){
            delSinger(this.idx)
            .then(res =>{
                if(res){
                    this.getData();
                    this.handleCurrentChange(1);
                    this.notify("删除成功","success")
                }else{
                    this.notify("删除失败","error")
                }
            })
            .catch(err =>{
                console.log(err);
            });
            this.delVisible = false;
        },
        // 转型歌曲管理页面
        songEdit(id,name){
            this.$router.push({path:`/Song`,query:{id,name}});
        }
    }
}
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .singer-img{
        width: 100%;
        height: 80px;
        border-radius: 5px;
        margin-bottom: 5px;
        overflow: hidden;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
        border: 1px solid rgb(68, 196, 210);
        border-radius: 10%;
    }
    .pagination{
        display: flex;
        justify-content: center;
    }
</style>